<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width"/>
    <title>player</title>
    <link rel="stylesheet" href="../../css/note.css">
    <!-- <script src="../../js/audio/resampler.js"></script> -->
    <!-- <script src="../../js/audio/XAudioServer.js"></script> -->
    <script src="../../js/player.js"></script>
</head>
<style>
body {
    margin-top: 45px;
}
button {
    height: 1.5rem;
    width: 5rem;
}
.error {
    background: #eaa;
}
</style>
<body>
<table>
    <tr>
        <th>代码</th>
        <th>名称</th>
        <th>默认值</th>
        <th>说明</th>
    </tr>
    <tr>
        <td>time</td>
        <td>时值</td>
        <td>八分音符</td>
        <td>类型为数字时, 单位是 ms;<br/>
            可用常量: "1", "2", "4", "8", "16";
            附点: "8.";<br/>
            也能以 "拍" (四分音符) 为单位, 如 "1.5b";<br/>
            分数的单位也是 "拍", 如 "1/3" 表示三分之一拍
        </td>
    </tr>
    <tr>
        <td>pitch</td>
        <td>音高</td>
        <td>440</td>
        <td>类型为数字时, 单位是 Hz; 可用常量: "C1" ~ "B6";<br/>
            升半音形如 "#A", 降半音如 "bE";<br/>
            和弦写成数组形式: ["C4", "E4", "G4"]
        </td>
    </tr>
    <tr>
        <td>volume</td>
        <td>音量</td>
        <td>0.5</td>
        <td>范围 0 ~ 1</td>
    </tr>
    <tr>
        <td>tone</td>
        <td>音色</td>
        <td>sin</td>
        <td>可用常量: "sine", "square", "sawtooth"</td>
    </tr>
</table>
<p>示例: {"time": 1000, "pitch": 440, "volume": 0.5, "tone": "sine"}</p>
BPM (40 ~ 250):
<input type="number" id="bpm" value="140" min="40" max="250">
<textarea id="score" rows="16" cols="40">
[
    {"pitch": ["#G4","C5","#F5","#G5"], "time": "4"},
    {"pitch": ["#G4","C5","#F5","#G5"], "time": "4"},
    {"pitch": ["C4","bB4","E5","G5"], "time": "4"},
    {"pitch": ["C4","bB4","E5","G5"], "time": "4"},
    {"pitch": ["#F4","bB4","E5","#F5"], "time": "2/3"},
    {"pitch": "#G5", "time": "1/3"},
    {"pitch": "#F5", "time": "1/3"},
    {"volume": 0, "time": "1/3"},
    {"pitch": ["bB3","#G4","D5","F5"], "time": "4/3"}
]
</textarea>
<br/>
<button onclick="player.play()">Play</button>
<button onclick="player.stop()">Stop</button>
<script>
var score = document.getElementById('score');
var bpm = document.getElementById('bpm');
var player = new Player(function() {
    return JSON.parse(score.value);
});

function debounce(callback, time) {
    var timeout;
    return function() {
        if (timeout) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(callback, time || 800);
    }
}

function onScoreInput() {
    //console.log('onScoreInput');
    try {
        player.updateTrack();
        score.classList.remove('error');
    } catch (e) {
        console.error(e);
        score.classList.add('error');
    }
}

function onBpmInput() {
    //console.log('onBpmInput');
    var bpmValue = parseInt(bpm.value);
    if (bpmValue >= 40 && bpmValue <= 250) {
        player.setBpm(bpmValue);
        bpm.classList.remove('error');
    } else {
        bpm.classList.add('error');
    }
}

score.oninput = debounce(onScoreInput);
bpm.oninput = debounce(onBpmInput);
onScoreInput();
onBpmInput();
</script>
</body>
</html>
